<template>
  <div class="left" @click.stop>
    <h2>添加题型</h2>

    <ul class="questions-types">
      <li class="question-type hover-light" @click="addQuestion" :data-type="QUESTION_TYPE_DESCRIPTION">
        <span class="svg">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="coral-icon coral-icon-info_line"><path d="M12 2c5.522 0 10 4.477 10 10s-4.478 10-10 10S2 17.523 2 12 6.478 2 12 2zm0 2c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm0 6a1 1 0 011 1v5a1 1 0 11-2 0v-5a1 1 0 011-1zm0-3a1 1 0 110 2 1 1 0 010-2z" fill-rule="evenodd"></path></svg>
        </span>
        <span class="text-padding">段落说明</span>
        <span class="icon-add">&#10010;</span>
      </li>
      <li class="question-type hover-light" @click="addQuestion" :data-type="QUESTION_TYPE_SINGLE">
        <span class="svg">
          <svg t="1657673670029" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2059" width="200" height="200"><path d="M512 853.333333c-187.733333 0-341.333333-153.6-341.333333-341.333333s153.6-341.333333 341.333333-341.333333 341.333333 153.6 341.333333 341.333333-153.6 341.333333-341.333333 341.333333z m0-85.333333c140.8 0 256-115.2 256-256s-115.2-256-256-256-256 115.2-256 256 115.2 256 256 256z m0-170.666667c-46.933333 0-85.333333-38.4-85.333333-85.333333s38.4-85.333333 85.333333-85.333333 85.333333 38.4 85.333333 85.333333-38.4 85.333333-85.333333 85.333333z" p-id="2060"></path></svg>
        </span>
        <span class="text-padding">单选题</span>
        <span class="icon-add">&#10010;</span>
      </li>
      <li class="question-type hover-light" @click="addQuestion" :data-type="QUESTION_TYPE_MULTI">
        <span class="svg">
          <svg t="1657673690600" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2981" width="200" height="200"><path d="M490.666667 507.733333L597.333333 401.066667l59.733334 59.733333-166.4 166.4-119.466667-119.466667 59.733333-59.733333 59.733334 59.733333zM213.333333 213.333333h597.333334v597.333334H213.333333V213.333333z m85.333334 85.333334v426.666666h426.666666V298.666667H298.666667z" p-id="2982"></path></svg>
        </span>
        <span class="text-padding">多选题</span>
        <span class="icon-add">&#10010;</span>
      </li>
      <li class="question-type hover-light" @click="addQuestion" :data-type="QUESTION_TYPE_SELECT">
        <span class="svg">
          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="coral-icon coral-icon-drop_down_line">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M4 4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2H4zm.669 2a.667.667 0 00-.667.667v10.666c0 .369.298.667.667.667h14.666a.667.667 0 00.667-.667V6.667A.667.667 0 0019.335 6H4.67z"></path>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.693 9.793a1 1 0 011.415 0l2.12 2.12 2.122-2.12a1 1 0 011.414 1.414l-3.535 3.536-3.536-3.536a1 1 0 010-1.414z"></path>
            <path opacity="0.01" d="M.333.333h23v23h-23z"></path>
          </svg>
        </span>
        <span class="text-padding">下拉选项</span>
        <span class="icon-add">&#10010;</span>
      </li>
      <li class="question-type hover-light" @click="addQuestion" :data-type="QUESTION_TYPE_TEXT">
        <span class="svg">
          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="coral-icon coral-icon-single_line_text_line">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M19.001 17.998c0 .553-.449 1.002-1.002 1.002H6.003a1.002 1.002 0 01-1.002-1.002V6.002C5.001 5.449 5.45 5 6.003 5h11.996c.553 0 1.002.449 1.002 1.002v11.996zM17.998 3H6.002A3.002 3.002 0 003 6.002v11.996A3.002 3.002 0 006.002 21h11.996A3.002 3.002 0 0021 17.998V6.002A3.002 3.002 0 0017.998 3z"></path>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M16 11H8a1 1 0 100 2h8a1 1 0 100-2"></path>
            <path opacity="0.01" d="M.333.333h23v23h-23z"></path>
          </svg>
        </span>
        <span class="text-padding">单行文本</span>
        <span class="icon-add">&#10010;</span>
      </li>
      <li class="question-type hover-light" @click="addQuestion" :data-type="QUESTION_TYPE_TEXTAREA">
        <span class="svg">
          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="coral-icon coral-icon-fill_in_the_blanks_line">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M4 3a2 2 0 00-2 2v14a2 2 0 002 2h16a2 2 0 002-2V5a2 2 0 00-2-2H4zm.666 2A.667.667 0 004 5.667v12.666c0 .369.298.667.666.667h14.667a.667.667 0 00.667-.667V5.667A.667.667 0 0019.333 5H4.666z"></path>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M7 15a1 1 0 100 2h2a1 1 0 100-2H7zM7 7a1 1 0 100 2h2a1 1 0 100-2H7z"></path>
            <path d="M7 9h2v6H7z"></path>
            <path opacity="0.01" d="M23.666.333h-23v23h23z"></path>
          </svg>
        </span>
        <span class="text-padding">多行文本</span>
        <span class="icon-add">&#10010;</span>
      </li>
      <li class="question-type hover-light" @click="addQuestion" :data-type="QUESTION_TYPE_MATRIX_RADIO">
        <span class="svg">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="coral-icon coral-icon-matrix_radio_line"><path d="M8.5 2a6.49 6.49 0 015.999 4.025C18.684 6.284 22 9.75 22 14a8 8 0 01-8 8c-4.249 0-7.714-3.314-7.975-7.498A6.49 6.49 0 012 8.5 6.5 6.5 0 018.5 2zM14 8c-3.309 0-6 2.691-6 6s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 3.895a2.104 2.104 0 11.001 4.209A2.104 2.104 0 0114 11.895zM8.5 4A4.505 4.505 0 004 8.5c0 1.628.877 3.042 2.178 3.829a8.004 8.004 0 016.143-6.149C11.535 4.88 10.127 4 8.5 4z" fill-rule="evenodd"></path></svg>
        </span>
        <span class="text-padding">矩阵单选题</span>
        <span class="icon-add">&#10010;</span>
      </li>
    </ul>
    <p class="tip" v-show="newSurveyData.addFromCurrent && newSurveyData.currentOrder !== -1"><b>注意：</b>会添加在当前选中题目的上方</p>
  </div>
</template>

<script>
import { QUESTION_TYPE_DESCRIPTION, QUESTION_TYPE_SINGLE, QUESTION_TYPE_MULTI, QUESTION_TYPE_SELECT, QUESTION_TYPE_TEXT, QUESTION_TYPE_TEXTAREA, QUESTION_TYPE_MATRIX_RADIO } from '@/constants/default'
import newSurveyData from '@/store/new-survey-data'

export default {
  data() {
    return {
      newSurveyData: newSurveyData(),

      QUESTION_TYPE_DESCRIPTION,
      QUESTION_TYPE_SINGLE,
      QUESTION_TYPE_MULTI,
      QUESTION_TYPE_SELECT,
      QUESTION_TYPE_TEXT,
      QUESTION_TYPE_TEXTAREA,
      QUESTION_TYPE_MATRIX_RADIO,
    }
  },
  methods: {
    addQuestion(e) {
      const { type } = e.currentTarget.dataset
      this.newSurveyData.addQuestion(type)
    },
  }
}
</script>

<style lang="scss" scoped>
.left {
  width: 200px;
  height: 500px;
  overflow: auto;

  z-index: 10;
  position: fixed;
  top: 100px;
  left: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px 0px #00000011;
  border-radius: 4px;

  h2 {
    font-size: 24px;
    font-weight: bold;
    padding: 10px;
    margin-left: 10px;
  }

  .questions-types {
    padding: 10px 20px;
    .question-type {
      margin: 5px 0;
      height: 40px;
      width: 160px;
      padding-right: 20px;

      display: flex;
      align-items: center;
      justify-content: flex-start;

      .icon-add {
        flex: 1 0 auto;
        text-align: end;
      }
    }
  }

  .tip {
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
  }
}
</style>
